Theme handles the presentation layer of Drupal application. That means what we can see via browsers can be handled by theme.
In Drupal we can use different themes for the admin panel and front end. There are a lot of themes available in drupal.org for both admin panel and front end. We can use Drupal core themes for the admin panel. Seven is the good one for basic websites. But if you want to create a standard look and feel for the admin panel, you can use one of these themes as parent and inherit your own admin theme from this. But your choice is not limited to core admin themes, also you can use contributed admin themes. Some of them are adminal and gin. My favourite is adminal. You can try any theme and use the best one that is suitable for your business.
Same like admin themes, you can create front end themes. There is no difference between creating frontend and admin themes. Best choice is to use one core or contributed theme as parent and inherit your custom theme from them. So you get all the benefits of the parent theme in your child theme. Some of the good contributed themes that can be used for parent themes are Zen and bootstrap. In Drupal 7 my favourite was zen but now in Drupal 9 I am using bootstrap.
Here I am explaining how to create a custom theme. This blog is based on Drupal 9 version.
There are three ways to create modules.
1. Manually
If you are new in drupal development please use this method to create custom theme.
- Create a folder under your-project-folder/web/themes/custom directory Eg: mytheme
- Add your-project-folder/web/themes/custom/mytheme/mytheme.info.yml file. Mytheme.info.yml providesmetadata about your theme.
- Add necessary informations on mytheme.info.yml file
name: mytheme
type: theme
base theme: false
description: 'Site front end theme.'
package: Custom
core_version_requirement: ^8 || ^9
libraries: - mytheme/bootstrap-styles - mytheme/global-styling - mytheme/bootstrap-scripts - mytheme/global-scripts
regions: content: Content footer: 'Footer' header: 'Header'
name provides text name of theme which is displayed in admin theme listing (Appearance) page.
type key value should be ‘theme’
core_version_requirement key specifies that this theme is compatible with versions mentioned here. The Core_version_requirement requirement only works with 8.7.7 or greater. If your theme need to work with lower version then you have to use core key ie, core: 8.x
package key can be used to group the modules in admin module module listing page. This is not a required key. But it would be nice to place your module under a package.
On the above name, type, core_version_requirement or core are required keys. The others are optional.
base theme key can be false if you are not using any parent theme. Value of base theme should be the machine name of parent theme if you are using any.
description is the brief of the theme.
Package key can be used to group the theme in the admin theme listing page. This is not a required key. But it would be nice to place your theme under a package.
Libraries key can be used to add libraries that are required for this theme. You can add theme specific libraries on mytheme.libraries.yml file. Libraries are css or javascript files needed for your theme.
Regions key is used to create regions in your theme. Regions divide the pages into sections, where we can place our contents.
There are a lot of other optional keys available. You can refer to Drupal.org if you are looking for more advanced theme implementation.
2. Using Drush
Drush is a command line tool for drupal development.You can install drush via composer require --dev drush/drush
Run the below code after installing drush
vendor/bin/drush generate theme
This will ask a lot of options like below.
Welcome to theme generator!
Theme name [Web]: mytheme
Theme machine name [mytheme]: mytheme
Base theme [classy]: false
Description [A flexible theme with a responsive, mobile-first layout.]: Site front end theme.
Package [Custom]: custom
Would you like to use SASS to compile style sheets? [No]: no
Would you like to create breakpoints? [No]:
Would you like to create theme settings form? [No]:
That's it. Drush will create a theme under the web/themes/custom folder automatically.
3. Using Drupal console
Drupal console is another command line tool for drupal which is inspired by symfony console.
You can install Drupal console via
composer require drupal/console:~1.0 \
--prefer-dist \
--optimize-autoloader \
--sort-packages \
--no-update
Run the below code after installing Drupal console
vendor/bin/drupal generate:theme
This will ask the following options
// Welcome to the Drupal theme generator
Enter the new theme name []: > mytheme
Enter the theme machine name [mytheme]: > mytheme
Enter the theme Path [themes/custom]: >
Enter theme description [My Awesome theme]: > Site front end theme.
Enter package name [Other]: > custom
Enter Drupal Core version [8.x]: > 8.x
Base theme (i.e. classy, stable) [false]: >
Enter the global styling library name [global-styling]: >
Do you want to add another library? (yes/no) [yes]: > no
Do you want to generate the theme regions? (yes/no) [yes]: > no
Do you want to generate the theme breakpoints? (yes/no) [yes]: > no
Do you want proceed with the operation? (yes/no) [yes]: > yes
That's it. Drush will create a theme under the web/themes/custom folder automatically.
This is just a basic example of how to create a theme. You can add functionalities based on your requirements.
Some Basic things to remember:
- If you want to alter some core functionality based on theme you can use mytheme.theme.
- If you want to alter some core templates, you can have a look at the core system module template directory. You can copy the files to mytheme/templates folder and add your code there. Then run vendor/bin/drush cr thats it.
- If you want to alter some templates file from contributed modules, check the templates folder under module path. Copy the files to mytheme/templates folder and run vendor/bin/drush cr
- If you want to check the available templates, you can enable twig debug mode and check view source. Twig is the default template engine for Drupal. You can check the symfony twig documentation to acquire advanced knowledge about twig